<template>
  <div style="margin-top: 0px">
    <Row style="height:300px;background: #fff; border-radius: 5px; padding: 10px">
        <el-carousel :interval="3000" type="card">
          <el-carousel-item  style="height:280px" v-for="item in pictures" :key="item.url">
            <img :src='item.url' alt='无图片' height='auto' width='100%'/>
          </el-carousel-item>
        </el-carousel>
    </Row>
    <!-- <Row :gutter='20'>
      <i-col :xs='12' :md='8' :lg='4' v-for='(infor, i) in inforCardData' :key='`infor-${i}`' style='height: 120px;padding-bottom: 10px;'>
        <infor-card shadow :color='infor.color' :icon='infor.icon' :icon-size='36'>
          <count-to :end='infor.count' count-class='count-style'/>
          <p>{{ infor.title }}</p>
        </infor-card>
      </i-col>
    </Row> -->
    <Row :gutter='20' style='margin-top: 10px'>
      <i-col :md='24' :lg='8' style='margin-bottom: 20px'>
        <Card shadow>
          <chart-pie
            style='height: 200px'
            :value='pieData1'
            :center='pieCenter'
            text='俱乐部种类'
          ></chart-pie>
        </Card>
      </i-col>
      <i-col :md='24' :lg='16' style='margin-bottom: 20px'>
        <Card shadow>
          <mul-bar text='本周活动参与人数' :datas='partInDatas' style="height: 200px;"/>
        </Card>
      </i-col>
    </Row>
    <Row>
        <div class="memberInc">
          <label style="font-size: 14px">请选择年份：</label>
          <el-select v-model="currentYear" placeholder="请选择" style="width: 90px;" @change="changeYear">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </div>
      <Card shadow>
        <example style='height: 300px' text='俱乐部人数' :datas='members'/>
      </Card>
    </Row>
  </div>
</template>
<style scoped lang='less'>
.el-carousel {
  margin: 0px 10px;
}
.introduce {
  background-color: #fff;
  padding: 20px;
  font-size: 16px;
}
.memberInc {
  background: #fff;
  padding: 10px 20px 0;
  .el-select {
    .el-input__inner {
      height: 24px !important;
      line-height: 24px !important;
      font-size: 12px;
    }
    .el-input__suffix {
      line-height: 24px !important;
      height: 30px !important;
    }
  }
}
</style>
<script>
import InforCard from '_c/info-card'
import CountTo from '_c/count-to'
import { ChartPie, ChartBar } from '_c/charts'
import Example from './example.vue'
import MulBar from '@/view/components/mulBar.vue'
export default {
  name: 'home',
  components: {
    InforCard,
    CountTo,
    ChartPie,
    ChartBar,
    Example,
    MulBar
  },
  data () {
    return {
      myDate: null,
      currentYear: '2021',
      options: [{ label: '2021', value: '2021' }],
      inforCardData: [
        {
          title: '新增用户',
          icon: 'md-person-add',
          count: 803,
          color: '#2d8cf0'
        },
        { title: '累计点击', icon: 'md-locate', count: 232, color: '#19be6b' },
        {
          title: '新增问答',
          icon: 'md-help-circle',
          count: 142,
          color: '#ff9900'
        },
        { title: '分享统计', icon: 'md-share', count: 657, color: '#ed3f14' },
        {
          title: '新增互动',
          icon: 'md-chatbubbles',
          count: 12,
          color: '#E46CBB'
        },
        { title: '新增页面', icon: 'md-map', count: 14, color: '#9A66E4' }
      ],
      pieCenter: ['50%', '80%'],
      pieData1: [
        { value: 310, name: '乒乓球' },
        { value: 234, name: '篮球' },
        { value: 180, name: '瑜伽' },
        { value: 135, name: '游泳' },
        { value: 335, name: '羽毛球' },
        { value: 40, name: '足球' },
        { value: 200, name: '户外活动' },
        { value: 80, name: '舞蹈' }
      ],
      pictures: [
        { url: require('@/imgs/1.jpg') },
        { url: require('@/imgs/2.jpg') },
        { url: require('@/imgs/3.jpg') },
        { url: require('@/imgs/4.jpg') },
        { url: require('@/imgs/5.jpg') },
        { url: require('@/imgs/10.jpg') },
        { url: require('@/imgs/7.jpg') },
        { url: require('@/imgs/8.jpg') },
        { url: require('@/imgs/9.jpg') }
      ],
      partInDatas: {
        legend: ['武汉', '深圳', '杭州', '上海'],
        xAxis: ['羽毛球', '乒乓球', '篮球', '游泳', '足球', '瑜伽', '舞蹈', '户外活动'],
        yAxis: [
          ['251', '372', '193', '280', '130', '182', '102', '90'],
          ['209', '124', '153', '104', '73', '62', '72', '103'],
          ['15', '131', '301', '103', '138', '210', '142', '62'],
          ['123', '152', '103', '93', '68', '90', '79', '110']
        ],
        yName: '人数'
      },
      budget: { '羽毛球': '251', '乒乓球': '372', '篮球': '193', '游泳': '280', '足球': '130', '瑜伽': '182', '舞蹈': '102', '户外活动': '90' },
      members: {
        xAxis: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
        legend: ['羽毛球', '乒乓球', '篮球', '游泳', '足球', '瑜伽', '舞蹈', '户外活动'],
        yAxis: [
          ['52', '72', '85', '107', '113', '135', '137', '138', '139', '148', '150', '151'],
          ['33', '35', '38', '42', '55', '62', '72', '80', '82', '85', '93', '99'],
          ['15', '18', '33', '36', '45', '45', '45', '58', '62', '69', '70', '75'],
          ['23', '28', '35', '35', '38', '45', '48', '56', '59', '62', '64', '68'],
          ['66', '68', '72', '75', '75', '75', '79', '89', '95', '97', '102', '109'],
          ['42', '48', '52', '54', '59', '59', '68', '72', '74', '78', '81', '89'],
          ['27', '27', '34', '35', '39', '42', '44', '48', '52', '59', '67', '80'],
          ['72', '79', '82', '85', '89', '90', '95', '101', '108', '112', '125', '135']
        ],
        lineColor: ['#2d8cf0', '#10A6FF', '#0C17A6', '#4608A6', '#398DBF', '#73FBE1', '#AC21B2', '#621902']
      }

    }
  },
  methods: {
    changeYear () {

    }
  },
  mounted () {
    // var myChart = echarts.init(this.$refs.mulBar)
    // myChart.setOption(this.option);
  }
}
</script>
